<template>
  <div>
    
    <shopHeader :pageType = pageThree></shopHeader>
    <div id="store">
        <div class="container">
            <div class="firstTitle">
                <div class="head">
                    <div class="name">{{seller.name}}</div>
                    <div class='subHead'>
                        <ul class='starList'>
                            <li class='starItem'></li>
                            <li class='starItem'></li>
                            <li class='starItem'></li>
                            <li class='starItem'></li>
                            <li class='starItem'></li>
                        </ul>
                        <div class='name'>{{seller.distance}}</div>
                        <div class='sale'>月售{{seller.sellCount}}单</div>
                    </div>
                </div>
                <div class="collect">
                    <div class="layout-favorite"></div>
                    <div class="isCollect">已收藏</div>
                </div>
            </div>
            <div class='commonInfo'>
                <ul class='info'>
                    <li class='startPrice'>
                        <div class='up'>起送价</div>
                        <div class='down'><span>{{seller.minPrice}}</span> 元</div>
                    </li>
                    <li class='transPrice'>
                        <div class='up'>商家配送</div>
                        <div class='down'><span>{{seller.deliveryPrice}}</span> 元</div>
                    </li>
                    <li class='transTime'>
                        <div class='up'>平均配送时间</div>
                        <div class='down'><span>{{seller.deliveryTime}}</span>分钟</div>
                    </li>
                </ul>
            </div>
            <div class='block'></div>
            <div class="notice">
                <div class="title">公告和活动</div>
                <div class='content'>
                   {{seller.bulletin}} </div>
                <ul class="noticeList">
                    <li class="reduce"  v-for="(sup,index) in seller.supports" :key="index">
                        <div class='bg'></div>
                        <div class='desc'>{{sup.content}}</div>
                    </li>
                   
                </ul>
            </div>
            <div class='block'></div>
            <div class="pic">
                <div class="title">商家实景</div>
                <div class='imgList'>
                    <img :src="pic" v-for="(pic,index) in seller.pics" :key="index" width="120" height="90"/>           
                </div>
            </div>
            <div class='block'></div>
            <div class="shopInfo">
                <div class="title">商家信息</div>
                <ul class='shopInfoList'>
                    <li>该商家支持开发票,请在下单时填写好发票抬头</li>
                    <li>品类：其他菜系、包子粥店</li>
                    <li>地址：北京市昌平区回龙观西大街龙观置业大厦底商B座102单元1340</li>
                </ul>
            </div>
        </div>
   </div>

 
  </div>
</template>

<script>
import {mapActions,mapState} from 'vuex'
export default {
  name: "seller",
  data() {
      return {
          pageThree : 3,
      }
  },
  computed:{
      ...mapState(["seller"])
  },
  methods:{
      ...mapActions(["getSeller"])
  },
  async mounted(){
    await this.getSeller()
    
  }
};
</script>

<style scoped>
  
  .container .firstTitle{
      margin:36rem;
      font-size: 20rem;
      color: rgba(7,17,27);
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      border-bottom: 1px solid rgb(7,17,27,0.1)
  }
  .container .firstTitle .head {
    background-color: #fff;
  }
  .container .firstTitle .head .name{
      font-size: 28rem;
      line-height: 28rem;
      margin-bottom: 16rem;
      background-color: #fff;
  }
  .container .firstTitle .head .subHead{
      display: flex;
      padding-bottom: 36rem;
  }
  .container .firstTitle .head .subHead .starList{
      margin-right: 16rem;
      display: flex;
  }
  .container .firstTitle .head .subHead .starList .starItem{
      height: 36rem;
      width: 36rem;
      margin-right: 10rem;
      background: url("/images/star36_on@2x.png") no-repeat;
      background-size: cover;
  }
  .container .firstTitle .head .subHead div{
      color: rgba(77,85,93);
      line-height: 36rem;
      margin-right: 24rem;
  }
  .container .firstTitle .collect .layout-favorite{
      font-size: 48rem;
      color: rgb(240,20,20);
      text-align: center;
      margin-bottom: 8rem;
  }
  .container .firstTitle .collect .isCollect{
      color: rgba(77,85,93);
      line-height: 20rem;
  }
  .container .commonInfo .info{
      display: flex;
     
  }
  .container .commonInfo .info li{
      margin: 36rem 0;
      width: 250rem;
      text-align: center;
      border-right: 1px solid rgb(7, 17, 27,0.1);
  }
  .container .commonInfo .info li:nth-child(3){
      border: none;
  }
  .container .commonInfo .info li .up{
      font-size: 20rem;
      color: rgb(147,153,159);
      line-height: 20rem;
      margin-bottom:8rem;
  }
  .container .commonInfo .info li .down{
      font-size: 20rem;
      color: rgb(7,17,27);
      line-height: 20rem;
      line-height: 48rem;
  }
  .container .commonInfo .info li .down span{
      font-size: 48rem;
  }
  .block{
      height: 36rem;
      background-color: #f3f5f7;
      border-bottom:1px solid rgb(7, 17, 27,0.1);
      border-top:1px solid rgb(7, 17, 27,0.1);
  }
  .notice{
      margin: 36rem 24rem 0;
  }
  .notice .title{
      font-size: 28rem;
      line-height: 28rem;
      margin-bottom: 16rem;
  }
  .notice .content{
      font-size: 24rem;
      font-weight: 200;
      color: rgb(240,20,20);
      line-height: 48rem;
      padding-bottom: 32rem;
      border-bottom:1px solid rgb(7, 17, 27,0.1);
  }
  .notice .noticeList li{
      display: flex;
      padding: 32rem 24rem;
      border-bottom:1px solid rgb(7, 17, 27,0.1);
  }
  .notice .noticeList :last-child{
      border-bottom:none;
  }
  .notice .noticeList li .bg{
      width: 32rem;
      height: 32rem;
      margin-right:12rem;
  }
  .notice .noticeList .reduce .bg{
      background: url('/images/decrease_3@2x.png') no-repeat;
      background-size: cover;
  }
  .notice .noticeList .discount .bg{
      background: url('/images/discount_3@2x.png') no-repeat;
      background-size: cover;
  }
  .notice .noticeList .special .bg{
      background: url('/images/special_3@2x.png') no-repeat;
      background-size: cover;
  }
   .notice .noticeList .ticket .bg{
      background: url('/images/invoice_3@2x.png') no-repeat;
      background-size: cover;
  }
  .notice .noticeList .safe .bg{
      background: url('/images/guarantee_3@2x.png') no-repeat;
      background-size: cover;
  }
  .pic{
      padding: 36rem 0 36rem 36rem;
  }
  .pic .title{
      font-size: 28rem;
      line-height: 28rem;
      margin-bottom: 24rem;
  }
  .pic .imgList{
      display: flex;
      overflow: hidden;
      overflow-x: auto;
  }
  .pic .imgList::-webkit-scrollbar{
      display: none;
  }
  .pic .imgList img{
      width: 240rem;
      height: 180rem;
      background-color: #9c88ff;
      margin-right: 12rem;
  }
  .shopInfo{
      padding: 36rem;
  }
  .shopInfo .title{
      font-size: 28rem;
      line-height: 28rem;
      padding-bottom: 24rem;
      border-bottom:1px solid rgb(7, 17, 27,0.1);
  }
  .shopInfo .shopInfoList li{
      padding: 32rem 24rem;
      font-size: 24rem;
      font-weight: 200;
      color: rgb(7,17,27);
      line-height: 32rem;
      border-bottom:1px solid rgb(7, 17, 27,0.1);
  }
</style>